<template>
  <view class="container-gray">
    <form @submit="submit">
      <view class="list-cell">
        <view class="list-cell-name">
          <text style="color: #DC143C;">*</text>在职时间
        </view>

        <view style="display: flex;flex: 1;">
          <picker mode="date" @change="bindExpStartTimeChange" :value="dataForm.startTime || defaultTime" class="picker" name="startTime">
            <view v-if="dataForm.startTime" style="margin-left: 10upx;">{{dataForm.startTime}}</view>
            <view v-else class="placeholder" style="margin-left: 10upx;">开始日期</view>
          </picker>
          <view style="width: 80upx;">至</view>
          <picker mode="date" @change="bindexpEndTimeChange" :value="dataForm.endTime || defaultTime" class="picker" name="endTime">
            <view v-if="dataForm.endTime" style="margin-left: 10upx;">{{dataForm.endTime}}</view>
            <view v-else class="placeholder" style="margin-left: 10upx;">结束日期</view>
          </picker>
        </view>
      </view>

      <view class="list-cell">
        <view class="list-cell-name">
          <text style="color: #DC143C;">*</text>单位名称
        </view>
        <m-input
          class="m-input"
          type="text"
          clearable
          v-model="dataForm.place"
          name="place"
          placeholder="请输入"
          placeholder-style="font-weight: normal;"
        ></m-input>
      </view>

      <view class="list-cell">
        <view class="list-cell-name">
          <text style="color: #DC143C;">*</text>职务
        </view>
        <m-input
          class="m-input"
          type="text"
          clearable
          v-model="dataForm.craft"
          name="craft"
          placeholder="请输入"
          placeholder-class="placeholder"
        ></m-input>
      </view>

      <view class="footer">
        <button type="primary" class="primary footer-btn" formType="submit">保存</button>
      </view>
    </form>

    <model v-if="hidden">
      <view class="model-content">
        <view>保存成功！</view>
      </view>
      <view class="model-footer">
        <button type="primary" class="model-footer-btn primary" @click="confirm">确定</button>
      </view>
    </model>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'
var graceChecker = require('../../js_sdk/graceui-dataChecker/graceChecker.js')

export default {
  data() {
    return {
      id: '',
      certTypeList: [],
      dataForm: {
        startTime: '',
        endTime: '',
        place: '',
        craft: '',
        userId: null
      },
      hidden: false,
      defaultTime: '',
    }
  },
  onLoad(options) {
    if (!options.id) {
      let date = new Date()
      let year = date.getFullYear()
      let month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()

      // 新增
      this.defaultTime = year + '-' + month + '-' + day
      this.dataForm.userId = uni.getStorageSync('userId')
    } else {
      // 编辑
      this.id = options.id
      this.dataForm.id = options.id
      this.getWorkrkInfo()
    }
  },
  methods: {
    // 获取工作经历信息
    async getWorkrkInfo() {
      let res = await post_md5(`/usercenter-app/workhistory/info/${this.id}`)
      this.dataForm = res.data
    },

    // 选择开始时间
    bindExpStartTimeChange(e) {
      this.dataForm.startTime = e.detail.value
    },

    // 选择结束时间
    bindexpEndTimeChange(e) {
      this.dataForm.endTime = e.detail.value
    },

    // 提交表单
    submit() {
      var rule = [
        {
          name: 'startTime',
          checkType: 'notnull',
          checkRule: '',
          errorMsg: '请选择开始时间'
        },
        {
          name: 'endTime',
          checkType: 'notnull',
          checkRule: '',
          errorMsg: '请选择结束时间'
        },
        {
          name: 'place',
          checkType: 'notnull',
          checkRule: '',
          errorMsg: '请选择单位名称'
        },
        {
          name: 'craft',
          checkType: 'notnull',
          checkRule: '',
          errorMsg: '请选择岗位/工种'
        }
      ]

      var checkRes = graceChecker.check(this.dataForm, rule)
      if (checkRes) {
        if (this.id) {
          this.editCert()
        } else {
          this.addCert()
        }
      } else {
        uni.showToast({ title: graceChecker.error, icon: 'none' })
      }
    },

    // 新增工作经历
    addCert() {
      var request = JSON.parse(JSON.stringify(this.dataForm))
      request['startTimeStr'] = request.startTime
      delete request['startTime']
      request['endTimeStr'] = request.endTime
      delete request['endTime']
      post_md5('/usercenter-app/workhistory/save', request).then(res => {
        if (res.code == 200) {
          this.hidden = true
        }
      })
    },

    // 编辑工作经历
    editCert() {
      var request = JSON.parse(JSON.stringify(this.dataForm))
      request['startTimeStr'] = request.startTime
      delete request['startTime']
      request['endTimeStr'] = request.endTime
      delete request['endTime']
      post_md5('/usercenter-app/workhistory/update', request).then(res => {
        if (res.code == 200) {
          this.hidden = true
        }
      })
    },

    // 提示弹窗
    confirm() {
      this.hidden = false
      uni.navigateBack({})
    },

    // 日期转换时间戳
    getTimestamp(value) {
      return new Date(value).getTime()
    },

    // 时间戳转换日期
    getDate(timestamp) {
      var date = new Date(timestamp * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let year = date.getFullYear()
      let month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      return year + '-' + month + '-' + day
    }
  }
}
</script>

<style>
.list-cell {
  padding: 30upx;
  background: #ffffff;
  margin-top: 1px;
}

.list-cell-name {
  font-size: 24upx;
  color: #999999;
  margin-bottom: 20upx;
}

.picker {
  flex: 1;
  text-align: left;
}

element.style {
  margin: 0;
}

.m-input {
  padding: 0;
  /* font-weight: bold; */
}

.placeholder {
  color: #808080;
}

.upload-box {
  border: 1px dashed #02a8f4;
  height: 418upx;
  border-radius: 10upx;
  color: #02a8f4;
  font-size: 28upx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-photo {
  width: 100%;
  height: 418upx;
  border-radius: 10upx;
}

.submit-btn {
  height: 98upx;
  font-size: 28upx;
  background: #02a8f4;
  width: 100%;
}
</style>
